<template>
  <div class="page search">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="$emit('input', false)"></i>
      <input
        type="text"
        placeholder="搜索歌曲、歌手、专辑"
        v-model="searchVal"
        @input="queryMusic"
      />
    </div>
    <div class="hot">
      <div class="title">热门搜索</div>
      <ul class="hot-word">
        <li
          v-for="(item, index) in hotWord"
          :key="index"
          @click="hotWordClick(item.first)"
        >
          {{ item.first }}
        </li>
      </ul>
    </div>
    <div v-if="searchVal!=''" class="search-list">
      <music-list :data="searchList" :count="-1"/>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import MusicList from "../common/music-list.vue";
export default {
  components: { MusicList },
  data() {
    return {
      searchVal: "",
      needLoading:true
    };
  },
  computed: {
    ...mapState({
      hotWord: (state) => state.search.hotWord,
      searchList:state=>state.search.searchList,
      loading:state=>state.search.loading
    }),
  },
  created() {
    this.$store.dispatch("search/getHotWord");
  },
  methods: {
    hotWordClick(word) {
      this.searchVal = word;
      this.$store.dispatch("search/getSearchList", {keywords: word});
    },
    queryMusic() {
      clearTimeout(this.time);
      if (this.searchVal == "") return;
      this.searchList.splice(0,this.searchList.length)
      this.time = setTimeout(() => {
        this.$store.dispatch("search/getSearchList", {
          keywords: this.searchVal,
        });
      }, 500);
    },
  }
};
</script>
 
<style lang = "scss" scoped>
@import "@/assets/global-style.scss";
.search {
  z-index: 10000;
  .header {
    position: fixed;
    top: 0;left: 0;right: 0;
    z-index: 100;
    display: flex;
    padding: 10px;
    height: 40px;
    box-sizing: border-box;
    background: $theme-color;
    align-items: center;
    i {
      font-size: 22px;
      color: $border-color;
      margin-right: 10px;
    }
    input {
      flex: 1;
      height: 25px;
      background: $theme-color;
      outline: none;
      border: none;
      color: $border-color;
      font-size: 14px;
      border-bottom: 1px solid $border-color;
      padding: 0 2px 0;
    }
    input::-webkit-input-placeholder {
      color: $border-color;
      font-size: 14px;
    }
  }
  .hot {
    margin-top: 40px;
    padding: 30px 20px 0;
    .title {
      color: $font-color-desc-v2;
      font-size: 16px;
      margin-bottom: 20px;
    }
    .hot-word {
      display: flex;
      flex-flow: wrap;
      li {
        color: #666;
        margin-right: 20px;
        background: #fff;
        padding: 6px 10px;
        font-size: 14px;
        border-radius: 5px;
        margin-bottom: 12px;
      }
    }
  }
}
/* 搜索列表 */
.search-list{
  position: absolute;
  top: 40px;
  min-height: calc(100vh - 40px);
  background: #fff;
  left: 0;right: 0;
}
</style>